<!--
 * @Author: gaojinyu 1593026814@qq.com
 * @Date: 2023-12-06 16:28:56
 * @LastEditors: gaojinyu 1593026814@qq.com
 * @LastEditTime: 2024-01-11 16:51:39
 * @FilePath: \test\src\components\Header2\index.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <div class="header_content">
    <div class="weather_box">
      <div class="weather_item">
        <!-- <div class="img_box" :style="{backgroundImage: `url(${require('../../assets/images/weather/'+weather1+'.png')}`}"></div> -->
        <img :src="`/weather/${weather1}.png`" alt="" />
      </div>
      <div class="weather_item">
        <div class="value">
          <span class="num">{{ humidity }}</span
          ><span class="sub">%</span>
        </div>
        <div class="name">湿度</div>
      </div>
      <div class="weather_item">
        <div class="value">
          <span class="num">88</span><span class="sub">良</span>
        </div>
        <div class="name">空气</div>
      </div>
      <div class="weather_item">
        <div class="value">
          <span class="num">{{ windPower }}</span
          ><span class="sub">级</span>
        </div>
        <div class="name">{{ windDirection }}风</div>
      </div>
    </div>
    <div class="title">{{ title }}</div>
    <div class="time_box">
      {{ nowTimes }}
    </div>
  </div>
  <div class="btn_box">
    <div :class="[{'active':index == currentIndex,'item':index != currentIndex}]" v-for="(item,index) in headerBtnList" @click="btnClick(item,index)">{{ item.name }}</div>
  </div>
</template>

<script setup>
import { useTimes } from "@/hooks/useTimes.js";
import { onMounted, getCurrentInstance, ref, reactive } from "vue";
let _this = getCurrentInstance().appContext.config.globalProperties;
let { nowTimes, y } = useTimes();
let title = "智慧社区可视化智慧大屏";
let currentIndex = ref(0)
// 温度
let temperature = ref("");
let humidity = ref("");
let windPower = ref("");
let weather1 = ref("");
let windDirection = ref("");
const iconWeatherMap = {
  大风: [
    "有风",
    "平静",
    "微风",
    "和风",
    "清风",
    "强风/劲风",
    "疾风",
    "大风",
    "烈风",
    "风暴",
    "狂爆风",
    "飓风",
    "热带风暴",
    "龙卷风",
  ],
  多云: ["少云", "晴间多云", "多云"],
  小雪: ["小雪-中雪", "雪", "阵雪", "小雪"],
  中雪: ["中雪", "中雪-大雪"],
  大雪: ["大雪"],
  暴雪: ["暴雪", "大雪-暴雪", "冷"],
  雾: ["雾", "浓雾", "强浓雾", "轻雾", "大雾", "特强浓雾"],
  霾: [
    "浮尘",
    "扬沙",
    "沙尘暴",
    "强沙尘暴",
    "阴",
    "霾",
    "中度霾",
    "重度霾",
    "严重霾",
    "未知",
  ],
  晴: ["晴", "热"],
  雨夹雪: ["雨雪天气", "雨夹雪", "阵雨夹雪"],
  大雨: [
    "暴雨",
    "大暴雨",
    "特大暴雨",
    "强阵雨",
    "极端降雨",
    "暴雨-大暴雨",
    "大暴雨-特大暴雨",
    "冻雨",
  ],
  阵雨: ["阵雨"],
  小雨: ["小雨", "毛毛雨/细雨", "雨", "小雨-中雨"],
  中雨: ["中雨", "中雨-大雨"],
  雷电: ["雷阵雨", "雷阵雨并伴有冰雹", "强雷阵雨"],
};

let headerBtnList = reactive([
  {
    name: "总览",
  },
  {
    name: "智慧党建",
  },
  {
    name: "四大民生",
  },
  {
    name: "三零建设",
  },
  {
    name: "数字孪生",
  },
]);

/**
 * 根据天气现象返回其图标icon url
 * @param {String} weather 天气现象
 * @returns 天气现象对应的某一类的url
 */
function _getIcon(weather) {
  // 这个是icon的默认值
  let url = "中雪";

  for (const weatherKey in iconWeatherMap) {
    if (Object.hasOwnProperty.call(iconWeatherMap, weatherKey)) {
      const weatherNames = iconWeatherMap[weatherKey];
      const findWeatherItem = weatherNames.find((name) => weather === name);
      // 如果找了某一类的图标了，那重新赋值url
      if (findWeatherItem) {
        // 这里的weatherKey和icon的名字一一对应了
        url = weatherKey;
        // console.debug('@find weather key = ', weatherKey)
        break;
      }
    }
  }

  return url;
}

// 菜单按钮点击
function btnClick(item,index){
  currentIndex.value = index
}
onMounted(() => {
  _this.$AMapLoader
    .load({
      key: "9900805441108295c4be4ba65c6b33cb", // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: ["AMap.Weather"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
    .then((AMap) => {
      console.log(AMap, "Amap");
      //创建天气查询实例
      var Weather = new AMap.Weather();

      //执行实时天气信息查询
      Weather.getLive("沈阳市", function (err, data) {
        console.log(err, data, "杭州市");
        temperature.value = data.temperature;
        humidity.value = data.humidity;
        windPower.value = data.windPower;
        weather1.value = _getIcon(data.weather);
        windDirection.value = data.windDirection;
        console.log(weather1.value, "weather1");
      });
    })
    .catch((e) => {});
});
</script>

<style lang="scss" scoped>
.header_content {
  width: 100%;
  height: 160px;
  background: url("~@/assets/images/header2.png");
  background-size: 100% 100%;
  position: relative;

  .title {
    position: absolute;
    top: 3%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 76px;
    // font-family: FZZiYYJW_2889503948;
    font-weight: 400;
    text-align: left;
    color: #ffffff;
    line-height: 80px;
  }
  .weather_box {
    display: inline-flex !important;
    position: relative;
    top: 10px;
    left: 20px;
    @include display(center, center, row);
    img {
      width: 74px;
      height: 100%;
    }

    .img_box {
      width: 74px;
      height: 100%;
      background-size: 100% 100%;
    }

    .weather_item {
      height: 100%;
      position: relative;
      @include display(center, flex-start, column);
      padding: 0 45px;
      .name {
        color: #14e6e6;
        font-size: 26px;
        transform: translateY(-6px);
      }
      .value {
        color: #fff;
        font-weight: bold;
        .num {
          font-size: 32px;
        }
        .sub {
          font-size: 24px;
        }
      }
    }
    // 选中第1、2、3个.weather_item并且添加伪元素
    .weather_item:nth-of-type(1)::after,
    .weather_item:nth-child(2)::after,
    .weather_item:nth-child(3)::after {
      content: "";
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
      width: 2px;
      height: 33px;
      background-color: rgba(60, 159, 176, 0.6);
      z-index: 99;
    }
  }
}
.time_box {
  font-size: 32px;
  font-weight: 400;
  color: #ffffff;
  position: absolute;
  top: 31px;
  right: 68px;
}
.btn_box {
  width: 2230px;
  margin-bottom: 50px;
  @include display(space-around, center, row);

  & > div {
    cursor: pointer;
    @include display(center, center, row);
    width: 308px;
    height: 88px;
    background-size: 100% 100% !important;
    font-family: Microsoft YaHei, Microsoft YaHei-Bold;
    text-align: left;
    color: #ffffff;
    line-height: 80px;
  }
  .item {
    font-size: 36px;
    font-weight: 400;
    background: url(~@/assets/images/header_btn_default.png);
  }
  .active {
    font-size: 40px;
    font-weight: 700;
    background: url(~@/assets/images/header_btn_active.png);
  }
}
</style>
